html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

::selection {
	color: white;
	background: $red;
}

::-moz-selection {
	color: white;
	background: $red;
}

body {
	background-color: $offwhite;
}

.full_height {
	height: 100%;
}

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "Noto Sans", sans-serif;
}

#content {
	min-height: 500px;
}

#tabletop {
	height: calc(100% - 100px);
	margin: 1em 0;
}

#navbar-logo {
	padding: 8px;
	height: 50px;
	width: 40px;
	float: left;
}

.container .navbar-collapse {
	padding-left: 0;
	padding-right: 0;
}

.navbar {
	border-radius: 0;
}

.navbar-hsreplay {
	background-color: $blue;
	color: $offwhite;
	margin-bottom: 0;
	border: 0;

	.navbar-toggle {
		border-color: $offwhite;

		.icon-bar {
			background-color: $offwhite;
		}
	}

	.navbar-brand {
		padding: 0;
		padding-right: 15px;

		h1 {
			padding: 12px 0;
			display: inline-block;
			font-size: 1.2em;
		}
	}

	.nav > li {
		> a:focus, > a:hover {
			color: $lightgrey;
			background-color: transparent;
		}

		> .promo-button {
			&:focus, &:hover {
				color: $red;
				background-color: $offwhite;
			}
		}
	}

	a {
		color: inherit;
	}

	.promo-button {
		font-size: 1em;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	@media (max-width: 767px) {
		.promo-button, .promo-button-outline {
			width: auto;
			float: left;
			margin: 0 15px 10px 10px;
		}
	}

	li.button-container {
		padding-top: 5px;
	}
}

.site-footer {
	clear: both;
	color: $darkgrey;
	font-size: x-small;
	margin-top: 3em;
	margin-bottom: 2em;
	text-align: center;
}

.site-footer p {
	margin: 0;
}

.site-footer a {
	color: inherit;
}

.site-footer abbr[title] {
	border-bottom: none;
}

/* Generic pages (eg. account, flatpages) */

.page {
	padding: 0 3em;
	max-width: 950px;
	margin: 0 auto;
}

.page section {
	margin-bottom: 2.5em;
}

#flatpage-content {
	margin: 0 auto;
}

#flatpage-header {
	color: #333;
	text-align: center;
	font-size: 1.5em;
	padding: 1em;
}

/* Elements */

#site-messages:not(:empty) {
	background-color: $blue;
	color: white;
	list-style: none;
	margin: 1em auto;
	padding: 1em;
	text-align: center;
	width: 300px;
}

/* Status message for uploads in progress */
.upload-status-message {
	background-color: $blue;
	color: white;
	font-size: 1.8em;
	margin-top: 10%;
	padding: 3em;
	text-align: center;

	a, a:active, a:hover {
		color: inherit;
		text-decoration: underline;
	}
}
